<%@ page language="java" import="java.util.*,com.fy.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>广商青协二维码通讯录系统</title>
		<meta name="keywords" content="广商青协,二维码,通讯录">
		<meta name="description" content="广商青协二维码通讯录系统">
		<%@ include file="../public/head.jspf"%>
		<style>
			body{background:url("img/qrcode/banner.jpg") no-repeat;background-size:cover;}
			.banner .box{width:1024px;height:460px;margin:0 auto;position:relative;font:18px/1 "微软雅黑";color:#eee;}
			.banner .box .info{width:512px;height:310px;bottom:0;left:10%;position:absolute;}
			.banner .box .info p{width:200px;height:40px;background:#222;margin:0 45px 15px 0;border-radius:5px;float:left;}
			.banner .box .info p span{width:50px;line-height:40px;background:#333;border-radius:5px 0 0 5px;display:inline-block;text-align:center;}
			.banner .box .info p input{width:130px;background:#222;border:none;color:#eee;outline:none;padding-left:6px;}
			.banner .box .info .btn{width:186px;line-height:40px;background:#383;margin:0 45px 15px 0;border-radius:5px;display:inline-block;color:#eee;text-align:center;transition:all 1s;}
			.banner .box .info .btn:hover{background:#4c4;transition:all 1s;}
			.banner .box .qrcode{right:10%;bottom:20%;display:none;position:absolute;z-index:2;}
			.shadow{width:100%;height:100%;top:0;left:0;background:#666;display:none;position:absolute;opacity:.3;z-index:1;}
		</style>
	</head>
	<body>
		<div class="top">
			<div class="header">
				<div class="logo">
					<a href="http://qx.scnuzc.cn/" target="_blank">
						<img src="img/qrcode/qx_logo.png" alt="广商青协" width="120" height="40">
					</a>
				</div>
				<div class="desc">二维码通讯录系统</div>
			</div>
		</div>
		<div class="banner">
			<div class="box">
				<div class="info">
					<p>
						<span>姓名</span>
						<input type="text" id="name" />
					</p>
					<p>
						<span>部门</span>
						<input type="text" id="department" />
					</p>
					<p>
						<span>职务</span>
						<input type="text" id="work" />
					</p>
					<p>
						<span>宿舍</span>
						<input type="text" id="address" />
					</p>
					<p>
						<span>手机</span>
						<input type="text" id="phone" />
					</p>
					<p>
						<span>邮箱</span>
						<input type="text" id="mail" />
					</p>
					<p>
						<span>网址</span>
						<input type="text" id="site" />
					</p>
					<p>
						<span>备注</span>
						<input type="text" id="remark" />
					</p>
						<a href="#" class="btn">开启通讯录</a>
						<a href="index.to" class="btn">返回</a>
				</div>
				<div class="qrcode">
					<img id='qrcodeImg' src="img/qrcode/wx.jpg" alt="二维码" width="235" height="235" />
				</div>
			</div>
			<div class="shadow"></div>
		</div>
		<div id="footer">
			<span>
				&copy; 2011-2016
				<a href="http://www.w3school.com.cn/" target="_blank">枫叶软件</a>
				版权所有<br />联系电话：0755-36182947
			</span>
		</div>
		<script>
			$(function() {
				var name = "", department = "", work = "", address = "", phone = "", mail = "", site = "", remark = "", info = "";
				$(".btn").click(
						function() {
							if ($("#name").val().length > 1) {
								name = "FN:" + $("#name").val() + "\n";
							}
							if ($("#department").val().length > 1) {
								department = "ORG:" + $("#department").val()
										+ "\n";
							}
							if ($("#work").val().length > 1) {
								work = "TITLE:" + $("#work").val() + "\n";
							}
							if ($("#address").val().length > 1) {
								address = "ADR;WORK:" + $("#address").val()
										+ "\n";
							}
							if ($("#phone").val().length > 1) {
								phone = "TEL;WORK:" + $("#phone").val() + "\n";
							}
							if ($("#mail").val().length > 1) {
								mail = "EMAIL;WORK:" + $("#mail").val() + "\n";
							}
							if ($("#site").val().length > 1) {
								site = "URL:" + $("#site").val() + "\n";
							}
							if ($("#remark").val().length > 1) {
								remark = "NOTE:" + $("#remark").val() + "\n";
							}
							info = "BEGIN:VCARD\n" + name + department + work
									+ address + phone + mail + site + remark
									+ "END:VCARD";
							$.ajax({
								type : "post",
								url : "vcard.qrcode",
								data : {content : info},
								success : function(data) {
									//点击按钮出现shadow层和qrcode层，然后弹出二维码图
									$(".shadow").show();
									$(".qrcode").show();
									$("#qrcodeImg").attr("src", data).addClass("animated rollIn").show();
								}
							});
						});
				//点击shadow层qrcode层隐藏，shadow层隐藏
				$(".shadow").click(function() {
					$(this).hide();
					$(".qrcode").hide();
					$(".qrcode").show().animate({
						width : "-235px",
						height : "-235px",
						right : "10%",
						bottom : "20%"
					}, 1000, function() {
						$(this).css({
							width : 235,
							height : 235
						}).hide();
					});
				});
			});
		</script>
	</body>
</html>